import React from 'react';
import { Card, List, Tag } from 'antd';
import { FireOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const TopicList: React.FC = () => {
  const topics = [
    {
      id: 1,
      title: '大模型应用落地挑战',
      count: 128,
      tags: ['热门']
    },
    {
      id: 2,
      title: 'AI监管新规解读',
      count: 96,
      tags: ['政策']
    },
    {
      id: 3,
      title: '生成式AI创业机会',
      count: 85,
      tags: ['创业']
    },
    {
      id: 4,
      title: 'AI芯片竞争格局',
      count: 72,
      tags: ['芯片']
    }
  ];

  return (
    <Card 
      title={
        <span>
          <FireOutlined style={{ color: '#ff4d4f', marginRight: 8 }} />
          热门专题
        </span>
      }
      bordered={false}
    >
      <List
        dataSource={topics}
        renderItem={item => (
          <List.Item>
            <Card hoverable style={{ width: '100%' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <h4 style={{ margin: 0 }}>
                    <Link to={`/topic/${item.id}`} style={{ color: '#ff4d4f' }}>{item.title}</Link>
                  </h4>
                  <div style={{ marginTop: 8 }}>
                    {item.tags.map(tag => (
                      <Tag key={tag} color="red">{tag}</Tag>
                    ))}
                  </div>
                </div>
                <span style={{ color: '#999' }}>{item.count}篇</span>
              </div>
            </Card>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default TopicList; 